<template>
     <div>
       <input ref='search' v-model="question"  placeholder="请输入" />
        <ul >
          <template v-for="item in resultList">
            <li ><span style="color:red;">{{prefix}}</span>{{item}}</li>
          </template>
      </ul>
     </div>
</template>
<style lang="scss" scoped>
 *{
    box-sizing: border-box;
  }
  ul li {
    list-style: none;
  }
 
</style>
<script>
  import{ Trie} from  '../../../utils/trie';
  export default {
    name: 'VueTrie',
      props: {
        word: {
          type: Array,
          required: true,
        },
      },
    data() {
      return {
        obj:new Trie(),
        resultList:[],
        question:'',
        status:'',
        str:'',
        prefix:'',
      }
    },
    components: {

    },
    created() {
    this.insert();
    },
    mounted() {
    },
    methods: {
      insert: function() {
          console.log(this.obj)
          for(var i = 0; i < this.word.length; i++) {
            this.obj.insert(this.word[i]);
          }
      },
    },
    watch: {
      question: function() {
        this.resultList = [];
        this.prefix = this.$refs.search.value;
        console.log( this.prefix ,' this.prefix ');
        if(this.prefix) {
          this.resultList=this.obj.startsWith(this.$refs.search.value);
          console.log(this.resultList,'resultList');
        }

      }
     
    }

  }
</script>
<style>
  
</style>